<script setup lang="ts">
import { ref, inject } from 'vue';

const NotifyService: any = inject('NotifyService');
const currentImgType = ['image/png', 'image/gif', 'image/jpg', 'image/jpeg'];
const file = ref<HTMLDivElement | null>(null);
const fileInput = ref<HTMLInputElement | null>(null);
const imageURL = './src/assets/image01.png';
const imageChangedEvent: any = ref(null);
const croppedImage = ref('');
const canvasRotation = ref(0);

const transform = ref({ scale: 0, rotate: 0, flipH: false, flipV: false });

/** 裁切后的图片 */
function imageCropped(event: any) {
    console.log(event);
    croppedImage.value = event.base64;
    // console.log('此处为图片返回值', croppedImage.value);
}

function upload() {
    fileInput.value?.click();
}

/** 上传图片变化事件 */
function fileChangeEvent(event: any): void {
    if (!event.target.files) {
        return;
    }
    const fileType = event.target.files[0].type;
    const size = event.target.files[0].size / 1024 / 1024;
    if (currentImgType.indexOf(fileType) < 0) {
        NotifyService.error('图片格式不对');
    } else if (size > 2) {
        NotifyService.error('文件过大');
    } else {
        imageChangedEvent.value = event;
    }
}

</script>
<template>
    <!-- (imageLoaded)="imageLoaded()" (cropperReady)="cropperReady($event)" (loadImageFailed)="loadImageFailed()"  -->
    <div>
        <div class="dialog-user-avatar" ref="file">
            <div class="dialog-user-avatar-change">
                <div class="avatar-cropper">
                    <div class="avatar-cropper-wrapper">
                        <f-image-cropper
                            :image-u-r-l="imageURL"
                            :resize-to-width="295"
                            :transform="transform"
                            :contain-within-aspect-ratio="false"
                            :canvas-rotation="canvasRotation"
                            :image-changed-event="imageChangedEvent"
                            @image-cropped="imageCropped"
                        ></f-image-cropper>
                    </div>
                </div>
            </div>
            <div class="dialog-user-avatar-view">
                <div class="avatar-view-title">头像预览</div>
                <div class="avatar-view-size">
                    <img :src="croppedImage" alt="" class="img" />
                    <span class="avatar-view-size-text">大尺寸100*100</span>
                </div>
                <div class="avatar-view-size avatar-view-size-small">
                    <img :src="croppedImage" alt="" class="img" />
                    <span class="avatar-view-size-text">小尺寸50*50</span>
                </div>
            </div>
        </div>
        <div class="dialog-user-avatar-tips">
            <div class="dialog-user-avatar-upload">
                <input
                    type="file"
                    class="user-avatar-upload"
                    :accept="'image/png,image/gif,image/jpg,image/jpeg'"
                    style="display: none"
                    @change="fileChangeEvent($event)"
                    ref="fileInput"
                />
                <!-- #file  -->
                <button class="btn btn-primary" @click="upload()">
                    <span class="f-icon f-icon-add"></span>
                    上传头像
                </button>
            </div>
            <div class="dialog-user-avatar-tip-content">提示：支持JPG/JPEG/PNG/GIF格式，文件小于2M</div>
        </div>
    </div>
</template>
<style></style>
